问题
XMLHttpRequest inside an object: how to keep the reference to “this”
且看代码
javascript
myObject.prototye = { ajax: function() { this.foo = 1; var req = new XMLHttpRequest(); req.open('GET', url, true); req.onreadystatechange = function (aEvt) { if (req.readyState == 4) { if(req.status == 200) { alert(this.foo); // reference to this is lost } } } };
在onreadystatechange
回调中再也引用不到主对象的this
了,当然就没有办法获取this.foo
变量了,有什么办法可以在这个回调中继续引用主对象呢
答案
最简单的办法就是将主对象的this
保存到局部变量中,
javascript
myObject.prototype = { ajax: function (url) { // (url argument missing ?) var instance = this; // <-- store reference to the `this` value this.foo = 1; var req = new XMLHttpRequest(); req.open('GET', url, true); req.onreadystatechange = function (aEvt) { if (req.readyState == 4) { if (req.status == 200) { alert(instance.foo); // <-- use the reference } } }; } };
如果我没有猜错的话,myObject
是一个构造函数,现在你这么直接设置它的原型对象,最好还是将原型对象的constructor
属性(设置)恢复为myObject
。
附,在<<JavaScript设计模式>>
看到的译者注:
/*
*译者注:定义一个构造函数时,其默认的prototype对象是一个Object 类型的实例,其constructor属性会被自动设置
*为该构造函数本身。如果手工将其prototype 设置为另外一个对象,那么新对象自然不会具有原对象的constructor值,
*所以需要重新设置其constructor 值。
*/
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。